<template>
  <div class="account-edit">
    <h3>编辑管理员账号</h3>
    
    <form @submit.prevent="submitForm" class="edit-form">
      <div class="form-group">
        <label for="maId">管理员ID:</label>
        <input 
          type="text" 
          id="maId" 
          v-model="form.maId" 
          disabled 
          class="form-control"
        />
      </div>
      
      <div class="form-group">
        <label for="maName">姓名:</label>
        <input 
          type="text" 
          id="maName" 
          v-model="form.maName" 
          required 
          class="form-control"
        />
      </div>
      
      <div class="form-group">
        <label for="maAccount">账号:</label>
        <input 
          type="text" 
          id="maAccount" 
          v-model="form.maAccount" 
          required 
          class="form-control"
        />
      </div>
      
      <div class="form-group">
        <label for="maPassword">密码:</label>
        <input 
          type="password" 
          id="maPassword" 
          v-model="form.maPassword" 
          required 
          class="form-control"
        />
      </div>
      
      <div class="form-actions">
        <button type="submit" class="submit-button">保存</button>
        <button type="button" class="cancel-button" @click="cancelEdit">取消</button>
      </div>
    </form>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import axios from 'axios'
import { useRoute, useRouter } from 'vue-router'

interface ManagerAccountForm {
  maId: number | string
  maName: string
  maAccount: string
  maPassword: string
}

const form = ref<ManagerAccountForm>({
  maId: '',
  maName: '',
  maAccount: '',
  maPassword: ''
})

const route = useRoute()
const router = useRouter()

// 从localStorage获取token
const token = localStorage.getItem('token')

// 组件挂载时获取传递的数据
onMounted(() => {
  // 获取通过路由传递的数据
  const accountData = history.state?.account || window.accountData
  if (accountData) {
    form.value = {
      maId: accountData.maId,
      maName: accountData.maName,
      maAccount: accountData.maAccount,
      maPassword: accountData.maPassword
    }
  }
})

// 提交表单
const submitForm = async () => {
  try {
    // 准备要发送的数据
    const requestData = {
      maId: form.value.maId.toString(),
      maName: form.value.maName,
      maAccount: form.value.maAccount,
      maPassword: form.value.maPassword
    }
    
    const response = await axios.post('http://localhost:8080/manager/updateManager', requestData, {
      headers: {
        'token': token,
        'Content-Type': 'application/json'
      }
    })
    
    if (response.data.success) {
      alert('管理员信息更新成功')
      // 返回管理员列表页面
      cancelEdit()
    } else {
      alert('更新失败: ' + response.data.message)
    }
  } catch (error) {
    console.error('更新管理员信息失败:', error)
    alert('更新失败，请稍后重试')
  }
}

// 取消编辑
const cancelEdit = () => {
  // 触发返回到管理员信息展示页面的事件
  const event = new CustomEvent('navigate-to-manage-accounts')
  window.dispatchEvent(event)
}
</script>

<style scoped>
.account-edit {
  width: 100%;
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
}

.account-edit h3 {
  color: #333;
  font-size: 2rem;
  margin-bottom: 30px;
  text-align: center;
}

.edit-form {
  background-color: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.form-group {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.form-group label {
  width: 100px;
  margin-right: 15px;
  font-weight: bold;
  color: #555;
  text-align: left;
}

.form-control {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  box-sizing: border-box;
}

.form-control:disabled {
  background-color: #f5f5f5;
  cursor: not-allowed;
}

.form-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

.submit-button,
.cancel-button {
  padding: 10px 30px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.submit-button {
  background: linear-gradient(to right, #007bff, #0056b3);
  color: white;
}

.submit-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.cancel-button {
  background: linear-gradient(to right, #6c757d, #495057);
  color: white;
}

.cancel-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
</style>